<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter()
const state = reactive({
  list: [
    {
      title: '媒体传播中心', code: 'classify_1a50d44', desc: '全媒体深度整合、矩阵式传播途径，全国各级媒体覆盖，贯穿传媒产业链上中下游', src: 'https://img.cctvch.cn/uploads/home/icon/xu/1.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/1.png'
    },
    {
      title: '政府合作中心', code: 'classify_1ee87ed', desc: '深度服务国家十二大部委，专业、精准、扎实的多元化服务', src: 'https://img.cctvch.cn/uploads/home/icon/xu/2.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/2.png'
    },
    {
      title: '绿色低碳传播中心', code: 'classify_22b0790', desc: '探索低碳可持续发展的新机遇、新路径、新产业《中国探索家》', src: 'https://img.cctvch.cn/uploads/home/icon/xu/3.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/3.png'
    },
    {
      title: '乡村振兴推广中心', code: 'classify_264a3db', desc: '因地制宜 助力推动乡村振兴战略', src: 'https://img.cctvch.cn/uploads/home/icon/xu/4.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/4.png'
    },
    {
      title: '国际事务中心', code: 'classify_2973a67', desc: '全球视野、本土意识，聚焦国际事务前沿领域', src: 'https://img.cctvch.cn/uploads/home/icon/xu/5.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/5.png'
    },
    {
      title: '品牌文化中心', code: 'classify_2d4c88a', desc: '品牌设计、影视制作、文创产业，打造文化产业价值链，促进品牌文化产业化发展', src: 'https://img.cctvch.cn/uploads/home/icon/xu/6.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/6.png'
    },
    {
      title: '健康中国项目中心', code: 'classify_378a6e6', desc: '联合权威专家、打造健康平台，助力国家健康中国战略', src: 'https://img.cctvch.cn/uploads/home/icon/xu/7.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/7.png'
    },
    {
      title: '会展会务中心', code: 'classify_3c6d1de', desc: '会议策划、创意设计、现场执行、全程管理，一站式会展服务', src: 'https://img.cctvch.cn/uploads/home/icon/xu/8.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/8.png'
    },
    {
      title: '数字科技中心', code: 'classify_455caaf', desc: 'CG、VR、5G、大数据等技术，专注多媒体研发探索，提供一体化创意展示方案', src: 'https://img.cctvch.cn/uploads/home/icon/xu/9.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/9.png'
    },
    {
      title: '区域发展规划中心', code: 'classify_4988ee9', desc: '参与区域发展战略布局，促进区域经济发展和社会进步', src: 'https://img.cctvch.cn/uploads/home/icon/xu/10.png', h: 'https://img.cctvch.cn/uploads/home/icon/shi/10.png'
    }
  ],
})
const handleClick = (index: number) => {
  router.push('/project/list?code=' + (state.list[index].code))
}
</script>

<template>
  <div class="project-box">
    <div class="container">
      <div class="project-list-wrapper" ref="boxDom">
        <div class="project-list">
          <div class="project-item" v-for="(item, index) in state.list" :key="index" @click="handleClick(index)">
            <div class="project-item-inner">
              <div class="img-box">
                <img class="s" :src="item.src" :alt="item.title">
                <img class="h" :src="item.h" :alt="item.title">
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.project-box {
  position: relative;
  overflow: hidden;
}


.project-list-wrapper {
  position: relative;
  padding: 25px 0;
  text-align: center;
}


.project-item {
  position: relative;
  width: 276px;
  height: 200px;
  float: left;
  margin: 40px 0;
  cursor: pointer;
  display: flex;
  place-items: center;

  &:not(:nth-child(5n)) {
    border-right: solid 1px #C6C6C6;
    margin-right: 15px;
  }
}

.project-item-inner {
  position: relative;
  z-index: 1;
  width: 265px;
  height: 234px;
  padding: 12px;

  &::before,
  &::after {
    position: absolute;
  }

  &::before {
    // z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);
  }

  &::after {
    z-index: 2;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background-color: #fff;
  }

  .img-box {
    width: 80px;
    height: 80px;
    display: inline-flex;
    place-items: center;

    >img {
      margin: 0 auto;
    }

    .h {
      display: none;
    }
  }

  .title {
    padding: 20px 0 10px;
    font-size: 16px;
    font-weight: 700;
  }

  .desc,
  .title,
  .img-box {
    position: relative;
    z-index: 5;
  }

  &:hover {
    box-shadow: 0px 0 22px 2px rgba(98, 102, 117, 0.35);

    .img-box {
      .s {
        display: none;
      }

      .h {
        display: block;
      }
    }

    .title {
      background-image: linear-gradient(to right, #252086 0%, #E60012 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    &::before,
    &::after {
      content: '';
    }
  }
}
</style>
